<template>
    <div :style="{marginTop:$store.state.navbarHeight+6+'px'}">
        <Navbar bgColor="bg-gradual-pink" title="مارس كىنوخانىسى" :showIcon="true" />
        <div class="wrap" :style="{marginTop:customBar()*2+12+'rpx'}">
            <div v-if="list.length>=12">
                <ad unit-id="adunit-30186b9b0818886c"></ad>
            </div>
            <div class="list">
                <VideoCover :show="true" v-for=" (item,index) in list" :key="index" :info="item"></VideoCover>
            </div>
            <!-- 如果结果为空 -->
            <div class="empty" v-if="emptyList">
                <div class="notice">تۈگەپتۇ</div>
            </div>
        </div>
        <div v-if="list.length<12">
            <ad unit-id="adunit-30186b9b0818886c"></ad>
        </div>
    </div>
</template>

<script>
import Navbar from "@/components/Navbar.vue";
import VideoCover from "@/components/VideoCover.vue";
import { Base64, $Toast } from "@/utils/index";
import { mapState, mapActions, mapGetters } from "vuex";

export default {
    components: {
        Navbar,
        VideoCover
    },
    data() {
        return {
            list: [],
            emptyList: false,
            currentPage: 1,
            pageSize: 12,
            scroll: {}
        };
    },
    onLoad() {
        this.getList().then(res => {
            if (res.length <= this.pageSize) {
                this.emptyList = true;
            }
            this.list = res;
        });
    },
    methods: {
        ...mapGetters(["customBar", "statusBar", "clientRect"]),
        getList() {
            let { query, from, sort, type } = this.$root.$mp.query;
            return new Promise((resolve, rejecr) => {
                wx.showLoading();
                if (from == "sort") {
                    this.$http
                        .get("/mpGetVideo", {
                            from: "sort",
                            sort,
                            currentPage: this.currentPage,
                            pageSize: this.pageSize
                        })
                        .then(res => {
                            let listStr = res.list
                                .replace(/\&/g, "A")
                                .replace(/\%/g, "B");
                            let list = Base64.decode(listStr);
                            list = JSON.parse(list);
                            this.videoContext = wx.createVideoContext(
                                "myVideo"
                            );
                            resolve(list);
                            if (list.length <= 0) {
                                this.emptyList = true;
                            }
                        });
                }
                if (from == "home") {
                    this.$http
                        .get("/mpGetVideo", {
                            from: "home",
                            type,
                            currentPage: this.currentPage,
                            pageSize: this.pageSize
                        })
                        .then(res => {
                            let listStr = res.list
                                .replace(/\&/g, "A")
                                .replace(/\%/g, "B");
                            let list = Base64.decode(listStr);
                            list = JSON.parse(list);
                            this.videoContext = wx.createVideoContext(
                                "myVideo"
                            );
                            resolve(list);
                        });
                }
                if (from == "VIP") {
                    this.$http
                        .get("/mpGetVideo", {
                            from: "VIP",
                            currentPage: this.currentPage,
                            pageSize: this.pageSize
                        })
                        .then(res => {
                            let listStr = res.list
                                .replace(/\&/g, "A")
                                .replace(/\%/g, "B");
                            let list = Base64.decode(listStr);
                            list = JSON.parse(list);
                            this.videoContext = wx.createVideoContext(
                                "myVideo"
                            );
                            resolve(list);
                        });
                }
                if (from == "search" && query) {
                    this.$http
                        .get("/mpGetVideo", {
                            from: "search",
                            query,
                            currentPage: this.currentPage,
                            pageSize: this.pageSize
                        })
                        .then(res => {
                            let listStr = res.list
                                .replace(/\&/g, "A")
                                .replace(/\%/g, "B");
                            let list = Base64.decode(listStr);
                            list = JSON.parse(list);
                            this.videoContext = wx.createVideoContext(
                                "myVideo"
                            );
                            resolve(list);
                        });
                }
                wx.hideLoading();
            });
        },
        onScroll(e) {
            this.scroll = e;
        },
        fnThrottle(fn, delay, atleast, e) {
            let timer = null;
            let previous = null;
            return function() {
                let now = +new Date();
                if (!previous) previous = now;
                if (atleast && now - previous > atleast) {
                    fn(e);
                    previous = now;
                    clearTimeout(timer);
                } else {
                    clearTimeout(timer);
                    timer = setTimeout(function() {
                        fn(e);
                        previous = null;
                    }, delay);
                }
            };
        }
    },
    onShareAppMessage() {
        return {
            title: "مارس كىنوخانىسى",
            path: `/pages/Home/Home`,
            success: res => {
                console.log("share-success");
            },
            fail: () => {
                console.log("share-fail");
            },
            complete: () => {}
        };
    },
    onPageScroll(e) {
        // this.fnThrottle(this.onScroll, 700, 700, e)();
    },
    onReachBottom: function() {
        this.currentPage += 1;
        wx.showLoading();
        this.getList()
            .then(res => {
                wx.hideLoading();
                this.list = this.list.concat(res);
                if (res.length <= this.pageSize) {
                    this.emptyList = true;
                }
            })
            .catch(err => {
                wx.hideLoading();
            });
    }
};
</script>

<style lang="scss" scoped>
@import url("../../assets/CSS/global.css");
.wrap {
    border: 1px solid transparent;
    width: 96%;
    margin: 0 auto;
    .list {
        display: grid;
        grid-template-columns: 32% 32% 32%;
        grid-column-gap: 15rpx;
    }
}
</style>